<template>
  <div class="components_layout-header">
    <ElButton type="primary" @click="getData()">sd</ElButton>
    <h1>{{ name }}</h1>
    <h1 class="text-red-2">{{ net }}</h1>
    <img src="/favicon.ico" alt="Logo">
    <MyInfo></MyInfo>
    <ElCard>这是ElCard</ElCard>
    <ElRadio></ElRadio>
    <MyF></MyF>
    <p>鼠标位置: ({{ x }}, {{ y }})</p>
    <ElButton @click="emitEvent">触发事件</ElButton>
    
  </div>
</template>

<script lang="ts" setup>
  import Service from '@/http/server';
  import Constants  from '@/constant/index';
  import { useCounterStore } from '@/stores/modules/dict';
  import Utils from '@/utils/index';
  import emitter from '@/emitter';

  import dayjs from 'dayjs';

// 要验证的日期字符串
const dateString = '2025-01-213';
// 使用 dayjs 解析日期
const parsedDate = dayjs(dateString);
// 验证解析结果是否为有效日期
const isValidDate = parsedDate.isValid();
// 输出验证结果
console.log('是否是日期{ isValidDate }', isValidDate); // 如果 dateString 是一个有效的日期，输出 true，否则输出 false
console.log(Constants.demoList[0].label)

  console.log('数据', import.meta.env.VITE_ENV)
  const emitEvent = () => {
    // 发布一个名为 'customEvent' 的事件，并传递一个参数
    emitter.emit('customEvent', { message: 'Hello, mitt!'});
  }
  // 订阅 'customEvent' 事件
  emitter.on('customEvent', (message) => {
    console.log('接收到事件:', message.message);
  });
  
  const useCounter = useCounterStore()

  const name = ref<string>("你好") // 这里的ref就是自动导入的，在auto-imports.d.ts中定义的,不需要再手动导入了
  const net = ref<Array<TabItem<number>>>(Constants.demoList)

    const { x, y } = useMouse();
    console.log('x', x.value)
    console.log('y', y.value)

  const getData = () => {
    
    console.log('Utils', Utils.trimString("sdfd gg "))
    useCounter.increment();
    console.log('pinia中userCounter', useCounter.count)
    Service.get("/api/weather/city/101030100", "").then(res=>{
      console.log('获取到的数据', res)
    })
  }
</script>

<style lang="scss" src="./index.scss" scoped></style>
